<template>
    <div class="home">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changename">改变姓名</button>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue"
// 定义props 父传子
const props = defineProps({
    name: {
        type: String,
        defualt: "默认值"
    },
    age: {
        type: Number,
        defualt: 0
    }
})
// 绑定函数 并发出事件
const emits = defineEmits(["emitsname"])
function changename() {
    emits("emitsname", "祭小荒")
}
// 父组件要拿到组件实例
function foo() {
    console.log("foo函数");
}
// 暴露出去
defineExpose({
    foo
})
</script>
<style scoped lang="less"></style>